<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    <style>
        #bg{
            width: 466px;
            height: 276px;
            background-image: url(images/plowland.jpg);
        }
        #seed{
            position: absolute;
            top: 225px;
            left: 20px;
            cursor: pointer;//指针变小手
        }
        #grow{
            position: absolute;
            top: 225px;
            left: 115px;
            cursor: pointer;//指针变小手
        }
        #bloom{
            position: absolute;
            top: 225px;
            left: 220px;
            cursor: pointer;//指针变小手
        }
        #fruit{
            position: absolute;
            top: 225px;
            left: 315px;
            cursor: pointer;//指针变小手
        }
        #harvest{
            position: absolute;
            top: 225px;
            left: 410px;
            cursor: pointer;//指针变小手
        }
        #temp{
            position: absolute;
            left: 200px;
            top: 100px;
        }
       

    </style>
</head>
<body>
    <div id="bg">
        <img id="seed" src="images/btn_seed.png" alt="">
        <img id="grow" src="images/btn_grow.png" alt="">
        <img id="bloom" src="images/btn_bloom.png" alt="">
        <img id="fruit" src="images/btn_fruit.png" alt="">
        <img id="harvest" src="images/btn_harvest.png" alt="">
        <!-- <img id="temp" > ---方法1 -->
    </div>
    <script>
        $(function(){
            $("#seed").click(function(){
                // $("#temp").attr("src","images/seed.png"); //种子  ---方法1
                $("#temp").remove();
                $("#bg").append($("<img id='temp' src='images/seed.png'>"))

            })

            $("#grow").click(function(){
                // $("#temp").attr("src","images/grow.png");
                $("#temp").replaceWith($("<img id='temp' src='images/grow.png'>"))

            })

            $("#bloom").click(function(){
                // $("#temp").attr("src","images/grow.png");
                $("#temp").replaceWith($("<img id='temp' src='images/bloom.png'>"))

            })

            $("#fruit").click(function(){
                // $("#temp").attr("src","images/grow.png");
                $("#temp").replaceWith($("<img id='temp' src='images/fruit.png'>"))

            })


            $("#harvest").click(function(){
                $("#temp").remove();

            })
        })
       

        
    </script>
</body>
</html>